<template>
  <div class="container box">
    <!-- 比赛报名页面 -   加个下次更新倒计时
    投票-
    浏览参赛作品并投票 -->
    <div class="left-box">
        <div class="top3">
            <div class="top-left">
                前三名票数统计
                <div class="statistic">
                    <el-statistic group-separator=","  :value="value2" :title="title"></el-statistic>
                    <el-statistic :value="deadline2"  @finish="handleFinish" time-indices title="距离下次刷新时间:">
                        <template slot="suffix"> 后刷新榜单 </template>
                    </el-statistic>
                </div>
                <div class="top3detail">
                  <div style="display: flex;flex-direction: row;" v-for="(item,index) in top3Data" :key="index">
                    <label >Top{{ index }}:</label><div class="count" :style="{width:(item.score/value2)*100  + '%'}" style="background-color: orange;">{{ item.score }}</div><br/>
                  </div>
                </div>
            </div>
        </div>
        <div class="other">
            <span style="font-size: 26px;">全部参赛选手</span>
            <span class="signIn" @click="handleSignIn"><i class="el-icon-wind-power"></i>立即报名</span>
            <hr style="margin-bottom: 10px; margin-top: 10px;"/>
            <!-- 其余参赛选手 -->
            <ul>
                <li class="li-item" v-for="item in itemData" :key="item.raceid">
                    <div class="item-box">
                        <el-card :body-style="{ padding: '0px' }">
                            <!-- <img :src="require('@/assets/workImg/'+item.img)" class="image"> -->
                            <el-image
                            style="width: 237px; height: 200px"
                            :src="require('@/assets/workImg/'+item.img)"
                            fit="fill"></el-image>
                            <div style="padding: 14px;">
                                <span>{{ item.summary }}</span>
                                <div style="margin-top: 3px;">已获赞:{{ item.score }}</div>
                                <div class="bottom clearfix">
                                <time class="time">{{ item.time }}</time>
                                <el-button type="text" class="button" @click="handleVote(item.raceid)">投票</el-button>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </li>
            </ul>
            
            <!-- 报名表单 -->
            <el-dialog title="填入信息" :visible.sync="dialogFormVisible" class="dialog-box" customClass="customWidth">
                <div class="form-box">
                  <el-form :model="form" size="medium" class="elform">
                    <el-form-item label="鱼获简介" :label-width="formLabelWidth">
                        <el-input v-model="form.summary" autocomplete="off" class="el-in" placeholder="最多十个字" :maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="鱼获图片" :label-width="formLabelWidth">
                      <el-upload
                        :multiple="multiple"
                        :limit="1"
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false"
                        :on-change="uploadFile"
                        ref="upload"
                        class="upload-box"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        
        <!-- 分页器 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :current-page="pageParam.pageNum"
          @current-change="handleCurrentChange"
          :page-size="pageInfo.pageSize"
          :hide-on-single-page="true"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div>
      <div class="nextRace">
        <!-- 下次参赛选手 -->
        <h3>下一届参赛选手</h3>
        <hr style="margin-top: 10px; margin-bottom: 10px;"/>
        <ul>
            <li class="li-item" v-for="item in itemDataNext" :key="item.raceid">
                <div class="item-box">
                    <el-card :body-style="{ padding: '0px' }">
                        <!-- <img :src="require('@/assets/workImg/'+item.img)" class="image"> -->
                        <el-image
                        style="width: 237px; height: 200px"
                        :src="require('@/assets/workImg/'+item.img)"
                        fit="fill"></el-image>
                        <div style="padding: 14px;">
                            <span>{{ item.summary }}</span>
                            <div style="margin-top: 3px;">已获赞:{{ item.score }}</div>
                            <div class="bottom clearfix">
                            <time class="time">{{ item.time }}</time>
                            <el-button type="text" class="button" disabled>投票</el-button>
                            </div>
                        </div>
                    </el-card>
               </div>
            </li>
        </ul>
        <!-- 分页器 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :current-page="pageInfoNext.pageNum"
          @current-change="handleCurrentChangeNext"
          :page-size="pageInfoNext.pageSize"
          :hide-on-single-page="true"
          :total="pageInfoNext.total"
        >
        </el-pagination>
      </div>
      </div>
    </div>
    
    <div class="right-box">
        <RaceMain/>
    </div>
  </div>
</template>

<script>
import {SignInCompetition,GetTime,GetRaceItem,GetNextRaceItem,IsVoted,Vote,GetVoteCount} from '@/request/api'
import RaceMain from '@/components/race/race_main.vue'
import { mapActions } from 'vuex';
export default {
  data(){
    return{
        imgSrc:null,
        value2:22000,
        title:'总参与票数',
        deadline2: null,
        currentDate:Date.now(),
        length:80,
        dialogImageUrl: '',
        dialogVisible: false,
        formLabelWidth: '120px',
        dialogFormVisible: false,
        multiple:true,
        form:{
          summary:'',
          file:null
        },
        pageParam:{
          pageNum:1
        },
        pageInfo:{
        },
        itemData:[],
        pageParamNext:{
          pageNum:1
        },
        pageInfoNext:{
        },
        itemDataNext:[],
        voteParams:{
          raceid:null
        },
        isVoted:false,
        top3Data:[]
    }
  },
  components:{
    RaceMain
  },
  methods:{
      ...mapActions({
        asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
      }),
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSignIn(){
        this.dialogFormVisible = true
      },
      uploadFile(file){
        this.form.file = file
        console.log("helo",file)
      },
      async handleSubmit(){
        this.dialogFormVisible = false
        const formData = new FormData()
        formData.append('file', this.form.file.raw)
        formData.append('summary', this.form.summary)
        // 发送请求
        let res = await SignInCompetition(formData)
        if(res.data.state == 200){
          // 成功
          this.asyncChangeIsShowToast({
            type:'success',
            msg:'参与成功'
          })
          this.form = {}
          // 刷新页面数据
          // 得到下次的
          let res3 = await GetNextRaceItem(this.pageParamNext)
          this.pageInfoNext = res3.data.data
          this.itemDataNext = res3.data.data.list
        }else{
          this.asyncChangeIsShowToast({
            type:'error',
            msg:'参与失败'
          })
        }
      },
      // 得到新数据
      async getRaceItem(param){
        let res2=await GetRaceItem(param)
        this.pageInfo = res2.data.data
        this.itemData = res2.data.data.list
      },
      async handleCurrentChange(pageNum){
        this.pageParam.pageNum = pageNum
        let res2=await GetRaceItem(this.pageParam)
        this.pageInfo = res2.data.data
        this.itemData = res2.data.data.list
        this.top3Data = this.itemData.slice(0,3)
      },
      async handleCurrentChangeNext(pageNum){
        this.pageParamNext.pageNum = pageNum
        let res2 = await GetNextRaceItem(this.pageParamNext)
        this.pageInfoNext = res2.data.data
        this.itemDataNext = res2.data.data.list
      },
      async handleVote(raceid){
        this.voteParams.raceid = raceid
        // 判断是否投过票？
        let res = await IsVoted(this.voteParams)
        this.isVoted = res.data.data
        if(this.isVoted){
          // 已经参与过投票
          this.asyncChangeIsShowToast({
            type:'error',
            msg:'您已经投过票了'
          })
        }else{
          // 发送投票请求
          let res2 = await Vote(this.voteParams)
          if(res2.data.state == 200){
            this.asyncChangeIsShowToast({
              type:'success',
              msg:'投票成功'
            })
          }
          // 刷新数据
          this.pageParam.raceid = raceid
          let res3=await GetRaceItem(this.pageParam)
          this.pageInfo = res3.data.data
          this.itemData = res3.data.data.list
          this.top3Data = this.itemData.slice(0,3)
        }
      },
      async handleFinish(){
        this.pageParam.pageNum = 1
        let res2= await GetRaceItem(this.pageParam)
        this.pageInfo = res2.data.data
        this.itemData = res2.data.data.list
        this.top3Data = this.itemData.slice(0,3)
      }
  },
  async created() {
      let res = await GetTime();
      this.deadline2 = Date.now() + res.data.data
      let res2= await GetRaceItem(this.pageParam)
      this.pageInfo = res2.data.data
      this.itemData = res2.data.data.list
      this.top3Data = this.itemData.slice(0,3)
      // 得到下次的
      let res3 = await GetNextRaceItem(this.pageParamNext)
      this.pageInfoNext = res3.data.data
      this.itemDataNext = res3.data.data.list
      // count
      let res4 = await GetVoteCount()
      this.value2 = res4.data.data
  }

}
</script>

<style scoped>
.box{
    display: flex;
    flex-direction: row;
}
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 237px;
    height: 200px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .left-box{
      flex: 7;
      padding: 10px;
  }
  .right-box{
      flex: 3;
      padding: 10px;
      border: 1px solid #e3dede;
  }
  ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .li-item{
    /* width: 300px;
    height: 400px; */
    margin-bottom: 20px;
    margin-right: 30px;
  }
  .li-item:hover{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  }
  .statistic{
    display: flex;
    flex-direction: row;
    justify-content: baseline;
  }
  .top3detail{
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 10px;
    border: 1px solid rgb(217,236,255);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    background-color: white;

  }
  .count{
    height: 20px;
    line-height: 20px;
    /* background-color: greenyellow; */
    border-radius: 4px;
    text-align: center;
  }
  .other{
    position: relative;
  }
  .signIn{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 5px;
    border: 1px solid gainsboro;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    position: absolute;
    right: 10px;
  }
  .signIn:hover{
    background-color: rgb(233,233,235);
  }
  .upload-box{
    width: 200px;
    height: 150px;
    overflow: hidden;
  }
  .el-in{
    width: 200px;
    margin-right: 20px;
  }
  .dialog-box{
    /* width: 500px !important; */
  /* display: flex !important; */
  /* justify-content: center !important; */
  /* align-items: center !important; */
}
.elform{
  margin: 0 auto !important;
}
.form-box{
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.block{
  width: 100%;
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}
.nextRace{
  margin-top: 20px;
}
</style>
